<template>
  <view class="bottom-nav">
    <view 
      v-for="(item, index) in navItems" 
      :key="index"
      class="nav-item"
      :class="{ active: currentPath === item.path }"
      @click="handleNavClick(item.path)"
    >
      <image 
        :src="currentPath === item.path ? item.activeIcon : item.icon" 
        mode="aspectFit" 
        class="nav-icon" 
      />
      <text class="nav-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BottomNav',
  props: {
    currentPath: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      navItems: [
        {
          text: 'Home',
          path: '/pages/index/TravelAppPage',
          icon: '/static/images/home-icon.svg',
          activeIcon: '/static/images/home-icon-active.svg'
        },
        {
          text: 'Explore',
          path: '/pages/explore/TravelExplorePage',
          icon: '/static/images/explore-icon.svg',
          activeIcon: '/static/images/explore-icon-active.svg'
        },
        {
          text: 'Schedule',
          path: '/pages/schedule/TravelSchedulePage',
          icon: '/static/images/schedule-icon.svg',
          activeIcon: '/static/images/schedule-icon-active.svg'
        },
        {
          text: 'Profile',
          path: '/pages/profile/TravelProfilePage',
          icon: '/static/images/profile-icon.svg',
          activeIcon: '/static/images/profile-icon-active.svg'
        }
      ]
    }
  },
  methods: {
    handleNavClick(path) {
      if (this.currentPath !== path) {
        uni.switchTab({
          url: path
        })
      }
    }
  }
}
</script>

<style>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.05);
  border-top: 1px solid #F5F5F5;
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  position: relative;
}

.nav-icon {
  width: 28px;
  height: 28px;
  transition: all 0.3s ease;
}

.nav-text {
  font-size: 12px;
  font-weight: 500;
  color: #89807A;
  transition: all 0.3s ease;
}

.nav-item.active {
  transform: translateY(-2px);
}

.nav-item.active .nav-text {
  color: #26C992;
  font-weight: 600;
}

.nav-item.active .nav-icon {
  opacity: 1;
  transform: scale(1.1);
}

.nav-item:not(.active) .nav-icon {
  opacity: 0.5;
}

.nav-item:active {
  transform: scale(0.95);
}
</style> 